<!-- 礼物弹出窗 -->
<template>
  <van-popup v-model="show" class="gift-popup">
    <div class="popup-content">
      <!-- 礼物列表 -->
      <div class="gift-list">
        <van-swipe class="my-swipe">
          <van-swipe-item v-for="pageItem in giftList" :key="pageItem.id" class="page-item">
            <div v-for="(gift, index) in pageItem.giftArr" :key="gift.id" :class="`gift-item ${gift.id === active ? 'gift-item-active' : ''}`" @click="active = gift.id">
              <van-image class="gift-img" :src="gift.url" />
              <div class="gift-name">{{ gift.labelEn }}</div>
              <div class="gift-name">{{ gift.label }}</div>
              <div v-show="setRightLine(gift, index, pageItem)" class="right-lien" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 底部 -->
      <div class="floor-content">
        <div class="btn-box">
          <!-- 取消按钮 -->
          <van-button
            class="btn"
            type="info"
            round
            color="linear-gradient(143deg, #FF9AFF -13.21%, #FF337F 107.99%)"
            @click="close()"
          >Cancel / 取消</van-button>
          <!-- 赠送按钮 -->
          <van-button
            class="btn"
            type="info"
            round
            color="linear-gradient(143deg, #FF9AFF -13.21%, #FF337F 107.99%)"
            @click="confirm()"
          >Yes / 确定</van-button>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { Swipe, SwipeItem, Image as VanImage } from 'vant'
import { getGiftList } from '@/dict/gift.js'
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    VanImage
  },
  data() {
    return {
      show: false,
      active: '1',
      giftList: getGiftList(8)
    }
  },
  methods: {
    // 获取礼物数据字典
    getGiftList,
    // 打开弹窗
    open() {
      this.show = true
    },
    // 渲染礼物右侧分界线
    setRightLine(data, index, pageData) {
      let flag = false
      const num = (index + 1) % 4
      if (this.active !== data.id && num !== 0 && pageData.giftArr[index + 1].id !== this.active) {
        flag = true
      }
      return flag
    },
    close() {
      this.show = false
    },
    confirm() {
      this.show = false
      this.$emit('confirm', this.active)
    }
  }
}
</script>

<style lang="less" scoped>
.gift-popup {
  width: 90%;
  border-radius: 20px;
}
.gift-list {
  padding: 37px 20px 0;
  .my-swipe .van-swipe-item {
    padding: 30px 0;
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  .page-item {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    .gift-item{
      width: 25%;
      padding: 10px 5px;
      box-sizing: border-box;
      margin-bottom: 25px;
      position: relative;
      .gift-img {
        width: 60%;
      }
      .gift-name {
        line-height: normal;
        color: #303030;
        font-size: 16px;
        font-family: Inter;
        font-style: normal;
        font-weight: 400;
        text-align: center;
        padding: 0 5px 0;
      }
    }
    .gift-item-active {
      border: 1px solid #1285FA;
      border-radius: 10px;
    }
    .right-lien {
      width: 1px;
      height: 90px;
      background: rgba(156, 156, 156, 0.8);
      position: absolute;
      top: 30px;
      right: 0;
    }
  }
}
.floor-content {
  width: calc(100% - 40px);
  padding: 31px 20px 35px;
  border-top: solid 1px #ebedf0;
  .btn-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      min-width: 265px;
      min-height: 70px;
      color: #FFF;
      font-family: Inter;
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
    }
  }
}
</style>
